page{
    background: #F5F5F5;
}
.brandImg{
    @include wh(100%,480rpx);
    position: relative;
    image{
        @include wh(100%,100%);
    }
    .masks{
        @include wh(100%,100%);
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
    }
}

.weui-sticky__fixed {
    @include wh(100%);
}
.mask {
    @include wh(100%, 100vh);
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
.mask2{
    @include wh(100%, 100vh);
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1004;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
}
.mask2.show {
    opacity: 1;
    visibility: visible;
}
.position-layout{
    position: relative;
    z-index: 10;
}
.brandInfo-top{
    @include wh(100%);
    padding: 0 24rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    
    @include flex(center,space-between);

    .brandInfo-top-left{
        height: 120rpx;
        @include flex(center,flex-start);
        
        .logo-layout{
            position: relative;
            .logo{
                @include flex(center,center);
                background: #F5F5F5;
                
                image{
                    @include wh(100%,100%);
                    
                }
            }
        }
        

        .brandName{
            @include fonts(32rpx,#222222,bold);
            @extend %text-overflow;
            margin-left: 24rpx;
        }
    }

    .but{
        @include fonts(28rpx,#FFFFFF,bold);
        padding: 8rpx 24rpx;
        background: #222222;
        border-radius: 4rpx;
    }
    .active{
        @include fonts(28rpx,#636569,bold);
        background: #F5F5F5;
    }
}

.brandInfo-layout{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    .bindInfo-text{
        @include fonts(28rpx,#636569);
        padding: 12rpx 0;
        box-sizing: border-box;
    }
    .text-overflow-many{
        @include text-overflow-many(4);
        height:180rpx;
    }

    .moer{
        @include wh(100%,92rpx);
        @include flex(center,center);
        @include fonts(28rpx,#967E4F);
        image{
            @include wh(32rpx,32rpx);
        }
    }

    
}

.screen-layout {
    @include wh(750rpx);
    padding-bottom: 16rpx;
    box-sizing: border-box;
    // position: fixed;
    // z-index: 10;
    background: #ffffff;
    margin-top: -2rpx;

    .item-layout {
        @include wh(100%, 76rpx);
        @include flex(center, space-between);
        @include fonts(26rpx, #939395);
        padding: 0 24rpx;
        box-sizing: border-box;

        .check {
            @include fonts(26rpx, #967e4f, bold);
        }

        .item {
            @include flex(center, center);

            image {
                @include wh(32rpx, 32rpx);
                margin-left: 8rpx;
            }
        }

        .item-card {
            @include wh(156rpx, 64rpx);
            @include flex(center, space-between);
            padding: 14rpx 16rpx;
            box-sizing: border-box;
            background: #f9f9f9;
            border-radius: 8rpx;

            .item-card-label {
                @include wh(calc(100% - 32rpx - 8rpx));
                @extend %text-overflow;
            }

            .checkItemCard{
                @include fonts(26rpx, #967E4F,bold);
            }

            image {
                @include wh(32rpx, 32rpx);
            }
        }
    }
    
    .popup-card {
        max-height: 65vh;
        background: #ffffff;

        .popup-layout {
            padding: 48rpx 24rpx 0 24rpx;
            box-sizing: border-box;

            .title {
                @include fonts(28rpx, #222222, bold);
                margin-bottom: 36rpx;
            }

            .price-card-layout {
                @include flex(center, space-between);
                margin-bottom: 60rpx;
                .price-card {
                    @include wh(318rpx, 88rpx);
                    @include flex(center,flex-start);
                    padding: 24rpx;
                    box-sizing: border-box;
                    background: #F9F9F9;
                    border-radius: 8rpx;
                    image{
                        @include wh(36rpx,36rpx);
                        margin-right: 16rpx;
                    }
                    .placeholder{
                        @include fonts(28rpx,#C9C9C9,400);
                    }
                    input{
                        @include fonts(28rpx, #222222, bold);
                    }
                }
                .line{
                    @include wh(15rpx,6rpx);
                    background: #BFBFBF;

                }
            }

            .label-layout{
                max-height: 336rpx;
                overflow-y: scroll;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .label{
                    @include wh(218rpx,88rpx);
                    @include flex(center,center);
                    @include fonts(28rpx,#636569);
                    background: #F9F9F9;
                    border-radius: 8rpx;
                    margin-bottom: 24rpx;
                    border: 1rpx solid #F9F9F9;
                }
                .checkLabel{
                    @include fonts(28rpx, #222222, bold);
                    background: #F9F9F9 linear-gradient(87deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
                }

                .checkLabel2{
                    background: #FFFFFF;
                    border: 1rpx solid #222222;
                }

                /* 如果最后一行是3个元素 */
                .label:last-child:nth-child(3n - 1) {
                    margin-right: calc(32.5% + 3% / 3);
                }
                /* 如果最后一行是2个元素 */
                .label:last-child:nth-child(3n - 2) {
                    margin-right: calc(65% + 6% / 3);
                }

            }


            .label-layout2{
                max-height: 540rpx;
                overflow-y: scroll;
                overflow-x: hidden;
                display: grid;
                grid-template-columns: repeat(4, 140rpx);
                grid-column-gap: 46rpx;
                grid-row-gap: 36rpx;
                padding-left: 2rpx;
                box-sizing: border-box;
                .label-item{
                    @include wh(140rpx);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .label2{
                        @include wh(140rpx,100rpx);
                        @include flex(center,center);
                        background: #F9F9F9;
                        border-radius: 4rpx;
                        border: 1rpx solid #F9F9F9;
                        image{
                            @include wh(100rpx,100rpx);
                        }
                    }

                    .checkLabel2{
                        background: #FFFFFF;
                        border: 1rpx solid #222222;
                    }
                    
                    .label-name{
                        @include wh(140rpx);
                        @include fonts(24rpx,#939395);
                        @extend %text-overflow;
                        text-align: center;
                        margin-top: 12rpx;
                    }
                }
            }
        }

        .but-layout{
            @include flex(center,space-between);
            padding: 84rpx 24rpx 48rpx 24rpx;
            box-sizing: border-box;
            .but{
                @include wh(338rpx,80rpx);
                @include flex(center,center);
                @include fonts(30rpx, #222222, bold);
                background: #F5F5F5;
                border-radius: 8rpx;
            }
            .but-confirm{
                @include fonts(30rpx, #FFFFFF, bold);
                background: #222222;
            }
        }
    }
}

.scroll-view{
    @include wh(100%);
    padding: 10rpx;
    box-sizing: border-box;
    padding-bottom: calc(env(safe-area-inset-bottom));
    box-sizing: border-box;

    .list-layout {
        @include wh(100%,calc(100vh - 400rpx));
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        
        
        .list-card {
            @include wh(calc((100% - 10rpx) / 2),620rpx);
            background: #ffffff;
            margin-bottom: 10rpx;

            .goodsImg {
                @include wh(100%, 360rpx);
                @include flex(center, center);
                position: relative;
                image {
                    @include wh(272rpx, 272rpx);
                }
                .like-icon{
                    @include wh(48rpx,48rpx);
                    position: absolute;
                    right: 22rpx;
                    top: 22rpx;
                }
            }

            .text-content {
                padding: 12rpx 24rpx 40rpx 12rpx;
                box-sizing: border-box;

                .title {
                    @include fonts(28rpx, #222222, bold);
                    margin-bottom: 24rpx;
                    @extend %text-overflow;
                }

                .content {
                    @include fonts(24rpx, #939395, 400);
                    @include text-overflow-many(2);
                    margin-bottom: 16rpx;
                    .label{
                        @include fonts(22rpx,#967E4F,bold);
                        display:inline;
                        margin-right: 8rpx;
                        padding: 0 8rpx;
                        box-sizing: border-box;
                        background: #F4F2ED;
                    }
                }

                .money {
                    @include flex(flex-end, flex-start);

                    .price {
                        @include fonts(32rpx, #222222, bold);
                    }

                    .originalPrice {
                        @include fonts(24rpx, #939395, 400);
                        text-decoration: line-through;
                        margin-left: 12rpx;
                    }
                }
            }
        }
    } 
}



.popup-bottom-layout{
    height: 100vh;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1006;
        
    transform: translateY(100%);
    transition: transform .3s;    
    .popup-bottom{
        height: 86%;
        width: 100%;
        position: absolute;
        bottom: 0;
        background: #ffffff;
        padding: 0 24rpx;
        box-sizing: border-box;
        
        .title-layout{
            @include flex(center,center);
            @include fonts(28rpx,#222222,bold);
            position: relative;
            padding: 40rpx 0 20rpx 0;
            .close{
                @include wh(32rpx,32rpx);
                position: absolute;
                top:40rpx;
                right: 20rpx;
            }

        }

        .popup-bottom-content{
            max-height: calc(100% - 176rpx - 100rpx - env(safe-area-inset-bottom));
            overflow-y: scroll;
            .title-label{
                @include flex(center,space-between);
                @include fonts(28rpx,#222222,bold);
                padding: 48rpx 0 24rpx 0;

                .title-label-right{
                    @include flex(center,flex-end);
                    @include fonts(26rpx,#939395,400);
                    image{
                        @include wh(32rpx,32rpx);
                        margin-left: 8rpx;
                    }
                }
            }

            .price-card-layout {
                @include flex(center, space-between);
                margin-bottom: 60rpx;
                .price-card {
                    @include wh(318rpx, 88rpx);
                    @include flex(center,flex-start);
                    padding: 24rpx;
                    box-sizing: border-box;
                    background: #F9F9F9;
                    border-radius: 8rpx;
                    image{
                        @include wh(36rpx,36rpx);
                        margin-right: 16rpx;
                    }
                    .placeholder{
                        @include fonts(28rpx,#C9C9C9,400);
                    }
                    input{
                        @include fonts(28rpx, #222222, bold);
                    }
                }
                .line{
                    @include wh(15rpx,6rpx);
                    background: #BFBFBF;

                }
            }

            .label-layout{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .label{
                    @include wh(218rpx,88rpx);
                    @include flex(center,center);
                    @include fonts(28rpx,#636569);
                    background: #F9F9F9;
                    border-radius: 8rpx;
                    margin-bottom: 24rpx;
                    border: 1rpx solid #F9F9F9;
                }
                .checkLabel{
                    @include fonts(28rpx, #222222, bold);
                    background: #F9F9F9 linear-gradient(87deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
                }

                .checkLabel2{
                    background: #FFFFFF;
                    border: 1rpx solid #222222;
                }

                /* 如果最后一行是3个元素 */
                .label:last-child:nth-child(3n - 1) {
                    margin-right: calc(32.5% + 3% / 3);
                }
                /* 如果最后一行是2个元素 */
                .label:last-child:nth-child(3n - 2) {
                    margin-right: calc(65% + 6% / 3);
                }

            }


            .label-layout2{
                overflow-x: hidden;
                display: grid;
                grid-template-columns: repeat(4, 140rpx);
                grid-column-gap: 46rpx;
                grid-row-gap: 36rpx;
                padding-left: 2rpx;
                box-sizing: border-box;
                .label-item{
                    @include wh(140rpx);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .label2{
                        @include wh(140rpx,100rpx);
                        @include flex(center,center);
                        background: #F9F9F9;
                        border-radius: 4rpx;
                        border: 1rpx solid #F9F9F9;
                        margin-top: 1rpx;
                        image{
                            @include wh(100rpx,100rpx);
                        }
                    }

                    .checkLabel2{
                        background: #FFFFFF;
                        border: 1rpx solid #222222;
                    }
                    
                    .label-name{
                        @include wh(140rpx);
                        @include fonts(24rpx,#939395);
                        @extend %text-overflow;
                        text-align: center;
                        margin-top: 12rpx;
                    }
                }
            }

        }


        .but-layout{
            @include flex(center,space-between);
            padding: 84rpx 0 calc(env(safe-area-inset-bottom) + 20rpx) 0;
            box-sizing: border-box;
            .but{
                @include wh(338rpx,80rpx);
                @include flex(center,center);
                @include fonts(30rpx, #222222, bold);
                background: #F5F5F5;
                border-radius: 8rpx;
            }
            .but-confirm{
                @include fonts(30rpx, #FFFFFF, bold);
                background: #222222;
            }
        }


    }
}

.popup-bottom-show{
    transform: translateY(0) !important;
}